.sidebar {
  user-select: none;
  height: 100%;
  min-width: var(--sidebar-width);
  width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  text-align: center;
  background: var(--sidebar-background);
  overflow-y: auto;
  overflow-x: hidden;
  float: left;
  border-right: var(--border-default);
  flex-grow: 1;
  @include scrollbar(0px);
  -ms-overflow-style: none;

  &__group {
    background-color: var(--sidebar-group-background-base);
    cursor: pointer;
    width: 100%;

    &__title {
      color: var(--color-text-base);
      font-size: var(--font-size-medium);
      font-weight: var(--font-weight-normal);
      padding: var(--spacing-half-unit) 0;
      text-transform: capitalize;
      text-align: left;
      border-bottom: var(--border-light);
      display: flex;
      position: relative;

      &__label {
        padding-left: var(--spacing-base-unit);
      }

      &__icon {
        position: absolute;
        transform: scale(0.9) translateX(2px) translateY(-4px);
        transform-origin: center center;
        opacity: 0.5;
        @include trans;
        svg {
          path {
            fill: currentColor;
          }
        }
      }
    }
    //  ---
    //  States
    //  ---

    //  Hover
    &:hover {
      .sidebar__group__title {
        &__icon {
          opacity: 1;
        }
      }
    }

    //  has active child
    &--is-active {
      color: var(--color-text-active);
      cursor: default;
      .sidebar__group__title {
        &__label {
          font-weight: var(--font-weight-semibold);
          color: var(--color-text-active);
        }
        &__icon {
          opacity: 1;
          svg {
            path {
              fill: var(--color-accent);
            }
          }
        }
      }
    }

    //  Is expanded
    &--is-expanded {
      .sidebar__group__title {
        &__icon {
          transform: scale(0.9) translateY(-5px) rotate(90deg);
          opacity: 1;
        }
      }
      .sidebar__group__title {
        position: relative;
        z-index: 4;
        box-shadow: var(--box-shadow-base);
      }
    }
  }

  &__item {
    color: var(--color-text-base);
    cursor: pointer;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-normal);
    line-height: var(--font-size-medium);
    text-transform: capitalize;
    background-color: var(--sidebar-item-background-base);
    padding: 10px;
    padding-left: 18px;
    padding-right: var(--spacing-quarter-unit);
    text-align: left;
    border-bottom: var(--border-light);
    position: relative;
    overflow: hidden;

    &--single {
      margin-top: 15px;
      &:last-child {
        margin-bottom: 15px;
      }
    }

    &::before {
      content: '';
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      width: 5px;
      background-color: var(--color-accent);
      transform: scaleX(0);
      transform-origin: left center;
      will-change: transform;
      @include trans;
    }
    span {
      display: block;
      will-change: transform;
      @include trans;
    }
    &:not(.sidebar__item--is-active) {
      &:hover {
        background-color: var(--sidebar-item-background-hover);
      }
    }

    &--is-active {
      &::before {
        transform: none;
      }
      color: var(--color-text-active);
      font-weight: var(--font-weight-semibold);
      cursor: default;
      span {
        transform: translateX(5px);
      }
    }
  }
  &__logo {
    height: 50px;
    margin: 10px;
  }
}
